<!DOCTYPE html>
<html lang="en">
  <head>
    <title>RAMReel  Reference</title>
    <link rel="stylesheet" type="text/css" href="css/jazzy.css" />
    <link rel="stylesheet" type="text/css" href="css/highlight.css" />
    <meta charset='utf-8'>
    <script src="js/jquery.min.js" defer></script>
    <script src="js/jazzy.js" defer></script>
    
  </head>
  <body>
    <a title="RAMReel  Reference"></a>
    <header>
      <div class="content-wrapper">
        <p><a href="index.html">RAMReel Docs</a> (93% documented)</p>
      </div>
    </header>
    <div class="content-wrapper">
      <p id="breadcrumbs">
        <a href="index.html">RAMReel Reference</a>
        <img id="carat" src="img/carat.png" />
        RAMReel  Reference
      </p>
    </div>
    <div class="content-wrapper">
      <nav class="sidebar">
        <ul class="nav-groups">
          <li class="nav-group-name">
            <a href="Constructors.html">Constructors</a>
            <ul class="nav-group-tasks">
              <li class="nav-group-task">
                <a href="Constructors.html#/s:FF7RAMReelU_FT_T_cERR">init(frame:dataSource:placeholder:hook:)</a>
              </li>
            </ul>
          </li>
          <li class="nav-group-name">
            <a href="Extensions.html">Extensions</a>
            <ul class="nav-group-tasks">
              <li class="nav-group-task">
                <a href="Extensions/String.html">String</a>
              </li>
              <li class="nav-group-task">
                <a href="Extensions/UIImage.html">UIImage</a>
              </li>
            </ul>
          </li>
          <li class="nav-group-name">
            <a href="Functions.html">Functions</a>
            <ul class="nav-group-tasks">
              <li class="nav-group-task">
                <a href="Functions.html#/*&gt;(_:_:)">*&gt;(_:_:)</a>
              </li>
              <li class="nav-group-task">
                <a href="Functions.html#/&lt;&amp;&gt;(_:_:)">&lt;&amp;&gt;(_:_:)</a>
              </li>
            </ul>
          </li>
          <li class="nav-group-name">
            <a href="Protocols.html">Protocols</a>
            <ul class="nav-group-tasks">
              <li class="nav-group-task">
                <a href="Protocols/ConfigurableCell.html">ConfigurableCell</a>
              </li>
              <li class="nav-group-task">
                <a href="Protocols/FlowDataDestination.html">FlowDataDestination</a>
              </li>
              <li class="nav-group-task">
                <a href="Protocols/FlowDataSource.html">FlowDataSource</a>
              </li>
              <li class="nav-group-task">
                <a href="Protocols/Parsable.html">Parsable</a>
              </li>
              <li class="nav-group-task">
                <a href="Protocols/Renderable.html">Renderable</a>
              </li>
              <li class="nav-group-task">
                <a href="Protocols/Theme.html">Theme</a>
              </li>
            </ul>
          </li>
          <li class="nav-group-name">
            <a href="Structs.html">Structs</a>
            <ul class="nav-group-tasks">
              <li class="nav-group-task">
                <a href="Structs.html#/DataFlow">DataFlow</a>
              </li>
              <li class="nav-group-task">
                <a href="Structs/RAMTheme.html">RAMTheme</a>
              </li>
              <li class="nav-group-task">
                <a href="Structs/SimplePrefixQueryDataSource.html">SimplePrefixQueryDataSource</a>
              </li>
              <li class="nav-group-task">
                <a href="Structs.html#/s:V7RAMReel16TextFieldReactor">TextFieldReactor</a>
              </li>
            </ul>
          </li>
          <li class="nav-group-name">
            <a href="Typealiases.html">Typealiases</a>
            <ul class="nav-group-tasks">
              <li class="nav-group-task">
                <a href="Typealiases.html#/s:F7RAMReelU_FT_T_L_8HookType">HookType</a>
              </li>
            </ul>
          </li>
          <li class="nav-group-name">
            <a href="Generic Type Parameters.html">Generic Type Parameters</a>
            <ul class="nav-group-tasks">
              <li class="nav-group-task">
                <a href="Generic Type Parameters.html#/s:tZF7RAMReeloi3lagu0_RxS_14FlowDataSource_S_19FlowDataDestinationrFTCSo11UITextFieldGVS_8DataFlowxq___GVS_16TextFieldReactorxq__L_2DSMx">DS</a>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
      <article class="main-content">
        <section>
          <section class="section">
            
            <p><a href="https://business.ramotion.com?utm_source=gthb&amp;utm_medium=special&amp;utm_campaign=reel-search-logo"><img src="https://raw.githubusercontent.com/Ramotion/reel-search/master/header.png" alt="header"></a></p>
<a href='#ramreel' class='anchor' aria-hidden=true><span class="header-anchor"></span></a><h1 id='ramreel'>RAMReel</h1>

<p><a href="https://developer.apple.com/swift/"><img src="https://img.shields.io/badge/Swift-2.2-green.svg?style=flat" alt="Swift 2.2"></a>
<a href="https://cocoapods.org/pods/RAMReel"><img src="https://img.shields.io/cocoapods/p/RAMReel.svg" alt="CocoaPods"></a>
<a href="http://cocoapods.org/pods/RAMReel"><img src="https://img.shields.io/cocoapods/v/RAMReel.svg" alt="CocoaPods"></a>
<a href="https://github.com/Ramotion/reel-search"><img src="https://img.shields.io/badge/Carthage-compatible-4BC51D.svg?style=flat" alt="Carthage compatible"></a>
<a href="https://codebeat.co/projects/github-com-ramotion-reel-search"><img src="https://codebeat.co/badges/a591dc07-0f55-4321-929b-b33904c3dca8" alt="codebeat badge"></a>
<a href="https://travis-ci.org/Ramotion/reel-search"><img src="https://img.shields.io/travis/Ramotion/reel-search.svg" alt="Travis"></a></p>

<p><a href="http://twitter.com/Ramotion"><img src="https://img.shields.io/badge/Twitter-@Ramotion-blue.svg?style=flat" alt="Twitter"></a></p>
<a href='#about' class='anchor' aria-hidden=true><span class="header-anchor"></span></a><h2 id='about'>About</h2>

<p>This project is maintained by Ramotion, Inc.<br>
We specialize in the designing and coding of custom UI for Mobile Apps and Websites.<br><br><strong>Looking for developers for your project?</strong> [<a href="http://business.ramotion.com?utm_source=gthb&amp;utm_medium=special&amp;utm_campaign=reel-search-contact-us/#Get_in_Touch">▶︎CONTACT OUR TEAM◀︎</a>]</p>

<p><a href="https://dribbble.com/shots/2516684-Telemedicine-iOS-App-Swift-Open-Source"><img src="https://raw.githubusercontent.com/Ramotion/reel-search/master/reel-search.gif" alt="animated"></a></p>

<p>The <a href="https://store.ramotion.com/product/iphone-6-mockups?utm_source=gthb&amp;utm_medium=special&amp;utm_campaign=reel-search">iPhone mockup</a> available <a href="https://store.ramotion.com/product/iphone-6-mockups?utm_source=gthb&amp;utm_medium=special&amp;utm_campaign=reel-search">here</a>.</p>
<a href='#requirements' class='anchor' aria-hidden=true><span class="header-anchor"></span></a><h2 id='requirements'>Requirements</h2>

<ul>
<li>iOS 8.0+</li>
<li>Swift 3.0</li>
</ul>
<a href='#installation' class='anchor' aria-hidden=true><span class="header-anchor"></span></a><h2 id='installation'>Installation</h2>

<p>We recommend using <strong><a href="https://cocoapods.org/">CocoaPods</a></strong> to install our library.</p>

<p>Just put this in your <code>Podfile</code>:</p>
<pre class="highlight ruby"><code><span class="n">pod</span> <span class="s1">'RAMReel'</span>
</code></pre>

<p>or <a href="https://github.com/Carthage/Carthage">Carthage</a> users can simply add Mantle to their <code>Cartfile</code>:
<code>
github &quot;Ramotion/reel-search&quot;
</code></p>
<a href='#usage' class='anchor' aria-hidden=true><span class="header-anchor"></span></a><h2 id='usage'>Usage</h2>

<p>In order to use our control you need to implement the following:</p>
<a href='#types' class='anchor' aria-hidden=true><span class="header-anchor"></span></a><h3 id='types'>Types</h3>

<ul>
<li><strong><code>CellClass</code></strong>: Your cell class must inherit from <a href="https://developer.apple.com/library/ios/documentation/UIKit/Reference/UICollectionViewCell_class/"><code>UICollectionViewCell</code></a> and implement the <a href="https://rawgit.com/Ramotion/reel-search/master/docs/Protocols/ConfigurableCell.html"><code>ConfigurableCell</code></a> protocol. Or you can just use our predefined class <a href="https://rawgit.com/Ramotion/reel-search/master/docs/Classes/RAMCell.html"><code>RAMCell</code></a>.</li>
<li><strong><code>TextFieldClass</code></strong>: Any subclass of <a href="https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextField_Class/"><code>UITextField</code></a> will do.</li>
<li><strong><code>DataSource</code></strong>: Your type must implement the <a href="https://rawgit.com/Ramotion/reel-search/master/docs/Protocols/FlowDataSource.html"><code>FlowDataSource</code></a> protocol, with <code>QueryType</code> being <code>String</code> and <code>ResultType</code> being <a href="https://rawgit.com/Ramotion/reel-search/master/docs/Protocols/Renderable.html"><code>Renderable</code></a> and <a href="https://rawgit.com/Ramotion/reel-search/master/docs/Protocols/Parsable.html"><code>Parsable</code></a>. Or you can just use our predefined class <a href="https://rawgit.com/Ramotion/reel-search/master/docs/Structs/SimplePrefixQueryDataSource.html"><code>SimplePrefixQueryDataSource</code></a>, which has its <code>ResultType</code> set to <code>String</code>.</li>
</ul>

<p>Now you can use those types as generic parameters of type declaration of <code>RAMReel</code>:</p>
<pre class="highlight swift"><code><span class="kt">RAMReel</span><span class="o">&lt;</span><span class="kt">CellClass</span><span class="p">,</span> <span class="kt">TextFieldClass</span><span class="p">,</span> <span class="kt">DataSource</span><span class="o">&gt;</span>
</code></pre>
<a href='#values' class='anchor' aria-hidden=true><span class="header-anchor"></span></a><h3 id='values'>Values</h3>

<p>Next you need to create an instance of <code>RAMReel</code>, and for that you need the following:</p>

<ul>
<li><strong><code>frame: CGRect</code></strong>: Rect, specifying where you want to put the control.</li>
<li><strong><code>dataSource: DataSource</code></strong>: the source of data for the reel.</li>
<li><strong><code>placeholder: String</code></strong> (<em>optional</em>): Placeholder text; by default, an empty string is used.</li>
<li><strong><code>hook: DataSource.ResultType -&gt; Void</code></strong> (<em>optional</em>): Action to perform on element selection, <code>nil</code> by default. You can add additional hooks later, if you need multiple actions performed.</li>
</ul>

<p>Let&rsquo;s use it to create an instance of <code>RAMReel</code>:</p>
<pre class="highlight swift"><code><span class="k">let</span> <span class="nv">ramReel</span> <span class="o">=</span> <span class="kt">RAMReel</span><span class="o">&lt;</span><span class="kt">CellClass</span><span class="p">,</span> <span class="kt">TextFieldClass</span><span class="p">,</span> <span class="kt">DataSource</span><span class="o">&gt;</span><span class="p">(</span><span class="nv">frame</span><span class="p">:</span> <span class="n">frame</span><span class="p">,</span> <span class="nv">dataSource</span><span class="p">:</span> <span class="n">dataSource</span><span class="p">,</span> <span class="nv">placeholder</span><span class="p">:</span> <span class="n">placeholder</span><span class="p">,</span> <span class="nv">hook</span><span class="p">:</span> <span class="n">hook</span><span class="p">)</span>
</code></pre>
<a href='#adding-action-hooks' class='anchor' aria-hidden=true><span class="header-anchor"></span></a><h3 id='adding-action-hooks'>Adding action hooks</h3>

<p>To add extra actions you may append <code>DataSource.ResultType -&gt; Void</code> functions to <code>RAMReel</code> object property <code>hooks</code>:</p>
<pre class="highlight swift"><code><span class="n">ramReel</span><span class="o">.</span><span class="n">hooks</span><span class="o">.</span><span class="n">append</span> <span class="p">{</span> <span class="n">data</span> <span class="k">in</span>
    <span class="c1">// your code goes here</span>
<span class="p">}</span>
</code></pre>
<a href='#putting-on-the-view' class='anchor' aria-hidden=true><span class="header-anchor"></span></a><h3 id='putting-on-the-view'>Putting on the view</h3>

<p>And the final step, showing <code>RAMReel</code> on your view:</p>
<pre class="highlight swift"><code><span class="n">ramReel</span><span class="o">.</span><span class="n">view</span><span class="o">.</span><span class="n">autoresizingMask</span> <span class="o">=</span> <span class="p">[</span><span class="o">.</span><span class="kt">FlexibleWidth</span><span class="p">,</span> <span class="o">.</span><span class="kt">FlexibleHeight</span><span class="p">]</span>
<span class="n">yourView</span><span class="o">.</span><span class="nf">addSubview</span><span class="p">(</span><span class="n">ramReel</span><span class="o">.</span><span class="n">view</span><span class="p">)</span>
</code></pre>

<p>If you have visual problems, try calling  <a href="https://rawgit.com/Ramotion/reel-search/master/docs/Classes/RAMReel.html#/s:FC7RAMReel7RAMReel17prepareForViewingu1_Rdq_CSo20UICollectionViewCellq_S_16ConfigurableCelldq0_CSo11UITextFieldq1_S_14FlowDataSourceqq_S2_8DataTypeS_8Parsableqq_S2_8DataTypeS_10Renderablezqq_S2_8DataTypeqq1_S4_10ResultTypezqq1_S4_9QueryTypeSS_FGS0_q_q0_q1__FT_T_"><code>prepareForViewing</code></a> before showing your view.</p>

<p>Like this:</p>
<pre class="highlight swift"><code><span class="k">override</span> <span class="kd">func</span> <span class="nf">viewDidLayoutSubviews</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">super</span><span class="o">.</span><span class="nf">viewDidLayoutSubviews</span><span class="p">()</span>
    <span class="n">ramReel</span><span class="o">.</span><span class="nf">prepareForViewing</span><span class="p">()</span>
<span class="p">}</span>
</code></pre>
<a href='#theming' class='anchor' aria-hidden=true><span class="header-anchor"></span></a><h3 id='theming'>Theming</h3>

<p>If you want to change <code>RAMReel</code> look and feel, you can use theming.</p>

<p>To do so, you just to have to implement the <a href="https://rawgit.com/Ramotion/reel-search/master/docs/Protocols/Theme.html"><code>Theme</code></a> protocol in your class/structure and set your <code>RAMReel</code> object&rsquo;s <code>theme</code> property to your theme.</p>

<p>Or you can just use the predefined instance of type <a href="https://rawgit.com/Ramotion/reel-search/master/docs/Structs/RAMTheme.html"><code>RAMTheme</code></a>.</p>
<pre class="highlight swift"><code><span class="k">let</span> <span class="nv">textColor</span><span class="p">:</span> <span class="kt">UIColor</span>
<span class="k">let</span> <span class="nv">listBackgroundColor</span><span class="p">:</span> <span class="kt">UIColor</span>
<span class="k">let</span> <span class="nv">font</span><span class="p">:</span> <span class="kt">UIFont</span>

<span class="k">let</span> <span class="nv">theme</span> <span class="o">=</span> <span class="kt">RAMTheme</span><span class="p">(</span><span class="nv">textColor</span><span class="p">:</span> <span class="n">textColor</span><span class="p">,</span> <span class="nv">listBackgroundColor</span><span class="p">:</span> <span class="n">listBackgroundColor</span><span class="p">,</span> <span class="nv">font</span><span class="p">:</span> <span class="n">font</span><span class="p">)</span>
</code></pre>
<a href='#docs' class='anchor' aria-hidden=true><span class="header-anchor"></span></a><h3 id='docs'>Docs</h3>

<p><a href="https://rawgit.com/Ramotion/reel-search/master/docs/index.html"><img src="https://img.shields.io/cocoapods/metrics/doc-percent/RAMReel.svg" alt="CocoaPods"></a></p>

<p>See more at <a href="https://rawgit.com/Ramotion/reel-search/master/docs/index.html">RAMReel docs</a></p>
<a href='#follow-us' class='anchor' aria-hidden=true><span class="header-anchor"></span></a><h2 id='follow-us'>Follow Us</h2>

<p><a href="https://twitter.com/intent/tweet?text=https://github.com/ramotion/reel-search"><img src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social" alt="Twitter URL"></a>
<a href="https://twitter.com/ramotion"><img src="https://img.shields.io/twitter/follow/ramotion.svg?style=social" alt="Twitter Follow"></a></p>

          </section>
        </section>
        <section id="footer">
          <p>&copy; 2016 <a class="link" href="https://github.com/Ramotion/reel-search" target="_blank" rel="external">Mikhail Stepkin, Ramotion Inc.</a>. All rights reserved. (Last updated: 2016-10-17)</p>
          <p>Generated by <a class="link" href="https://github.com/realm/jazzy" target="_blank" rel="external">jazzy ♪♫ v0.7.2</a>, a <a class="link" href="http://realm.io" target="_blank" rel="external">Realm</a> project.</p>
        </section>
      </article>
    </div>
  </body>
</div>
</html>
